<!--
 * @Description: What's this for
 * @Autor: WangYuan
 * @Date: 2022-03-23 11:18:33
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-07-12 15:52:08
-->
<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      v-if="userInfo.userType == 0"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="merchantId">
        <merchantSelect v-model="list.filter.merchantId" />
      </el-form-item>
      <el-form-item prop="companyId">
        <KiSelect
          v-model="list.filter.companyId"
          placeholder="企业"
          :search="getCompanys"
          :options.sync="options.companyList"
          :props="{ value: 'companyId', label: 'companyName' }"
        />
      </el-form-item>
      <el-form-item prop="placeCode">
        <AllRegionSelect
          v-model="list.filter.placeCode"
          :props="{ checkStrictly: true }"
          placeholder="所属地区"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <AuthButton @click="add" name="新增" />
        <ExportExcel
          url="/sot-admin-api/merchant/merchant/downloadMerchantList"
          :param="list.filter"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="商户ID" prop="merchantId"></el-table-column>
      <el-table-column label="组织机构" prop="companyName"></el-table-column>
      <el-table-column label="所属地区" prop="placeName"></el-table-column>
      <el-table-column label="商户名称" prop="name"></el-table-column>
      <el-table-column label="商户客服电话" prop="phone"></el-table-column>
      <el-table-column label="商户联系人" prop="contracts"></el-table-column>
      <el-table-column
        label="商户联系人手机号"
        prop="contactPhone"
      ></el-table-column>
      <el-table-column label="平台手续费(%)" prop="plateformCharge" width="140">
        <template slot-scope="{ row }">
          <el-tag>{{ row.platformChargeInfo.ticketCharge }}</el-tag>
          <el-tag>{{ row.platformChargeInfo.hotelCharge }}</el-tag>
          <el-tag>{{ row.platformChargeInfo.goodsCharge }}</el-tag>
          <el-tag>{{ row.platformChargeInfo.couponCharge }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { merchantId, businessStatus } }">
          <KiPopSwitch
            v-bind="popSwitchProps(businessStatus)"
            @change="
              updateStatus({
                merchantId: merchantId,
                status: businessStatus ^ 1
              })
            "
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button name="查看" @click="view(row)"></auth-button>
          <auth-button @click="edit(row)" name="编辑" />
          <auth-button name="支付渠道绑定" @click="pay(row)"></auth-button>
          <auth-button
            name="更改归属企业"
            circle
            v-if="!isAdmin"
            @click="changeVest(scope.row)"
          >
            <i class="el-icon-sort"></i>
          </auth-button>
          <auth-button @click="d({ merchantId: row.merchantId })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <addPage ref="addPage" @save="getList"></addPage>
    <!-- 支付渠道绑定 -->
    <pay ref="pay" @save="getList"></pay>
    <!-- 更改企业归属地 -->
    <vest @refresh="getList" ref="vest" />
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { special } from '@/utils/validate-ruler.js'
import Expired from '@/components/Expired'
import merchantSelect from '@/components/merchantSelect'
import { mapGetters } from 'vuex'
import addPage from './_add'
import pay from './components/pay'
import vest from './components/vest'

export default {
  mixins: [pageMixin],
  components: { Expired, addPage, pay, vest, merchantSelect },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/merchant/merchant',
      axiosConfig: {
        getList: {
          url: 'queryMerchantPage'
        },
        r: {
          url: 'selectOne'
        },
        d: {
          url: 'removeMerchant'
        },
        updateStatus: {
          url: 'changeStatus'
        }
      }
    }),
  data() {
    return {
      special,
      richTextPreview: false,
      options: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'isAdmin'])
  },
  methods: {
    getCompanys(name) {
      this.$POST('/sot-admin-api/sys/company/listForSelect', {
        companyName: name
      }).then(({ data }) => {
        this.options.companyList = data
      })
    },
    add() {
      this.$refs.addPage.open({
        title: '新增商户',
        type: 'add'
      })
    },
    view(row) {
      this.$POST('/sot-admin-api/merchant/merchant/selectOne', {
        id: row.merchantId
      }).then(({ data }) => {
        this.$refs.addPage.open({
          title: '查看商户',
          type: 'view',
          data
        })
      })
    },
    edit(row) {
      this.$POST('/sot-admin-api/merchant/merchant/selectOne', {
        id: row.merchantId
      }).then(({ data }) => {
        this.$refs.addPage.open({
          title: '编辑商户',
          type: 'edit',
          data
        })
      })
    },
    pay(data) {
      this.$refs.pay.open(data)
    },
    changeVest(data) {
      this.$refs.vest.open(data)
    }
  }
}
</script>
